<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>调查问卷</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/flexible.js"></script>
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="./wode/quest.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <style>
        html,
        body,
        #app {
            overflow: hidden;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            /* background-size: 100%; */
            background-color: #fff;
        }



        ::-webkit-input-placeholder {
            color: #D8E6FE;
        }

        /* Mozilla Firefox 4 to 18 */

        :-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Mozilla Firefox 19+ */

        ::-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Internet Explorer 10+ */

        :-ms-input-placeholder {
            color: #D8E6FE;
        }

        .mui-toast-container {
            top: 50%
        }

        .van-nav-bar__title {
            max-width: 100% !important;
        }

        .van-cell {
            display: flex;
            border: 1px solid #ccc;
            border-radius: 8px;
            flex-direction: column;

        }

        .numberTit {
            font-weight: bold;

        }

        .swipeBox {
            overflow-y: auto;
        }

        .countNum {
            padding: 10px 16px;
        }

        .headerBox,
        .van-field__label {
            margin-bottom: 10px !important;
            font-size: 16px;
        }

        .van-radio__label {
            font-size: 14px;
        }

        .optionBox {
            padding: 0 .35rem;
        }

        .van-radio {
            padding: .1rem 0;
        }

        .van-radio__icon {
            font-size: 17px;
        }

        .text_box .van-cell {
            border: 1px solid rgba(0, 0, 0, .2);
        }

        .text_box .van-field__control {
            height: 100px !important;
        }

        .van-field__label {
            width: 8em;
        }

        .numberTit {
            font-weight: bold;
            color: #000;
        }

        input[type=text] {
            padding: 10px 8px;
        }



        .btn_compt {
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .foot_text p:nth-child(1) {
            font-weight: bold;
            color: #000
        }

        .foot_text p:nth-child(2) {
            font-size: 13px;
            margin: 10px 0;
            color: #000
        }

        .van-checkbox {
            margin: 7px 0 7px 18px;
        }

        .title_Box {
            height: 30px;
            line-height: 30px;
            background: #5D9BD9;
            color: #fff;
            font-size: 18px;
            text-align: center;
        }

        .back_left {
            padding-left: 5px;
            width: 60px;
            height: 30px;
        }

        .back_left .van-button,
        .back_right .van-button {
            width: 50px;
            height: 27px;
        }

        .back_right {
            margin-right: 5px;
            width: 60px;
            height: 30px;
        }

        .content_tit {
            /* height: 30px; */
            margin: 5px 0;
            font-size: 14px;
        }

        .van-button--info,.van-checkbox__icon--checked .van-icon {
            background-color: #5D9BD9 !important;
            border: 1px solid #5D9BD9 !important;
        }

        .childName {
            width: 40%;
            text-align: center;
            border-radius: 30px;
            border-bottom-left-radius: 0;
            display: block;
            background: #5D9BD9;
            color: #fff;
            height: 24px;
            font-size: 11pt;
            line-height: 24px;
            font-weight: 0;
            padding: 0 16px;
            border: none;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="box" v-cloak>
        <div class="header_tit">
            <van-nav-bar title="智慧办公应用用户体验调研" left-arrow>
                <template #left>
                    <div class="back_l" v-if="typeNum == 1" @click="home"><img src="../image/left.png" alt=""></div>
                    <div class="back_left" v-else @click="backBtn">
                        <van-button round type="info">上一步</van-button>
                    </div>
                </template>
                <template #right>

                    <div class="back_right" v-if="typeNum == 5" @click="sendEmail">
                        <van-button round type="info">提交</van-button>
                    </div>
                    <div class="back_right" v-else @click="nextBtn">
                        <van-button round type="info">下一步</van-button>
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="swipeBox"  v-cloak  v-if="typeNum == 1">
            <p class="title_Box">一、i国网AI助手</p>
            <van-form ref="form">
                <div class="countNum" v-for="(item,index) in AIquesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit" v-text="index + 1 + '.' + item.name"></span>
                            <span style="color: red; " v-text="item.unit + '*'"></span>
                        </div>
                    </div>
                    <div class="optionBox" v-for="(i,v) in item.children">
                        <div class="childName" v-text="i.childName"></div>
                        <van-checkbox-group @change="checkChange(item)" v-model="item.checkBox">
                            <van-checkbox shape="square" v-for="(it,ind) in i.childrenList" :name="it.value"
                                :disabled="isCheckboxDisabled(item.checkBox.length, it, item.checkBox,4)">{{it.name}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                    <div class="contentTit">
                        <div class="content_tit" v-text="item.contentTitle"></div>
                        <van-field v-model="item.content" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="" show-word-limit />
                    </div>
                </div>
            </van-form>

        </div>
        <div class="swipeBox" v-if="typeNum == 2">
            <p class="title_Box">二、内网网站</p>
            <van-form ref="form">
                <div class="countNum" v-for="(item,index) in quesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit" v-text="index + 1 + '.' + item.name"></span>
                            <!-- <span style="color: red; ">*</span> -->
                        </div>
                    </div>
                    <div class="optionBox" v-for="(i,v) in item.children">
                         <div class="childName" v-text="i.childName"></div>
                        <van-checkbox-group v-model="item.checkBox">
                            <van-checkbox shape="square" v-for="(it,ind) in i.childrenList" :disabled="isCheckboxDisabled(item.checkBox.length, it, item.checkBox,4)" :name="it.value">{{it.name}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                    <div class="contentTit">
                        <div v-text="item.contentTitle"></div>
                        <van-field v-model="item.content" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="" show-word-limit />
                    </div>
                </div>
            </van-form>

        </div>
        <div class="swipeBox" v-if="typeNum == 3">
            <p class="title_Box">三、i国网智能辅助服务号</p>
            <van-form ref="form">
                <div class="countNum" v-for="(item,index) in igwquesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit" v-text="index + 1 + '.' + item.name"></span>
                            <!-- <span style="color: red; ">*</span> -->
                        </div>
                    </div>
                    <div class="optionBox" v-for="(i,v) in item.children">
                         <div class="childName" v-text="i.childName"></div>
                        <van-checkbox-group v-model="item.checkBox">
                            <van-checkbox shape="square" v-for="(it,ind) in i.childrenList" :disabled="isCheckboxDisabled(item.checkBox.length, it, item.checkBox,4)" :name="it.value">{{it.name}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                    <div class="contentTit">
                        <div v-text="item.contentTitle"></div>
                        <van-field v-model="item.content" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="" show-word-limit />
                    </div>
                </div>
            </van-form>

        </div>
        <div class="swipeBox" v-if="typeNum == 4">
            <p class="title_Box">四、电力智能输入法</p>
            <van-form ref="form">
                <div class="countNum" v-for="(item,index) in dianquesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit" v-text="index + 1 + '.' + item.name"></span>
                            <!-- <span style="color: red; ">*</span> -->
                        </div>
                    </div>
                    <div class="optionBox" v-for="(i,v) in item.children">
                         <div class="childName" v-text="i.childName"></div>
                        <van-checkbox-group v-model="item.checkBox">
                            <van-checkbox shape="square" v-for="(it,ind) in i.childrenList" :disabled="isCheckboxDisabled(item.checkBox.length, it, item.checkBox,2)" :name="it.value">{{it.name}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                    <div class="contentTit">
                        <div v-text="item.contentTitle"></div>
                        <van-field v-model="item.content" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="" show-word-limit />
                    </div>
                </div>
            </van-form>

        </div>
        <div class="swipeBox" v-if="typeNum == 5">
            <p class="title_Box">五、WPS插件</p>
            <van-form ref="form">
                <div class="countNum" v-for="(item,index) in wpsquesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit" v-text="index + 1 + '.' + item.name"></span>
                            <!-- <span style="color: red; ">*</span> -->
                        </div>
                    </div>
                    <div class="optionBox" v-for="(i,v) in item.children">
                         <div class="childName" v-text="i.childName"></div>
                        <van-checkbox-group v-model="item.checkBox">
                            <van-checkbox :disabled="isCheckboxDisabled(item.checkBox.length, it, item.checkBox,2)" shape="square" v-for="(it,ind) in i.childrenList" :name="it.value">{{it.name}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                    <div class="contentTit">
                        <div v-text="item.contentTitle"></div>
                        <van-field v-model="item.content" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="" show-word-limit />
                    </div>
                </div>
            </van-form>

        </div>
    </div>
</body>

<script>
    new Vue({
        el: ".box",
        data() {
            return {
                formData: {
                    name: '',
                    unit: '',
                    describe: '',
                    cellPhone: ''

                },
                typeNum: 1,
                checkBox: [],
                AIquesTionnair: [],
                quesTionnair: [],
                dianquesTionnair: [],
                igwquesTionnair: [],
                wpsquesTionnair: [],
                showPicker: false,
                columns: [],
                sumbitObj: {},
            }
        },
        created() {
            const _this = this
            _this.quesTionnair = quesTionnair
            _this.AIquesTionnair = AIquesTionnair
            _this.dianquesTionnair = dianquesTionnair
            _this.igwquesTionnair = igwquesTionnair
            _this.wpsquesTionnair = wpsquesTionnair
            let jsApiList = []
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/, function () {
                'use strict';
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'previewFile',
                    'onHistoryBack',
                ];
                wx.config({
                    beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: corpid, // 必填，政务微信的cropID
                    timestamp: '1626832073', // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录1
                    jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            });
        },
        mounted() {
        },
        methods: {
            isCheckboxDisabled(checkBoxLength, currentCheckbox, checkedBoxes,num) {
                return checkBoxLength > num && !checkedBoxes.includes(currentCheckbox.value);
            },
            nextBtn() {
                if (this.typeNum == 1) {
                    if (this.AIquesTionnair[0].checkBox.length == 0 || this.AIquesTionnair[1].checkBox.length == 0) {
                        mui.toast('请选择对应项', {
                            duration: 'long',
                            type: 'div'
                        })

                        return
                    }
                    if (!this.AIquesTionnair[2].content) {
                        mui.toast('请填写第三题', {
                            duration: 'long',
                            type: 'div'
                        })

                        return
                    }
                    this.typeNum++
                } else {
                    this.typeNum++
                }
                // else if (this.typeNum == 2 && this.submitForm(this.quesTionnair, 2)) {
                //    
                // } else if (this.typeNum == 3 && this.submitForm(this.igwquesTionnair, 3)) {
                //     this.typeNum++
                // } else if (this.typeNum == 4 && this.submitForm(this.dianquesTionnair, 4)) {
                //     this.typeNum++
                // }

            },
            backBtn() {
                this.typeNum--
            },
            // submitForm(data) {
            //     var num = 0
            //     data.forEach(question => {
            //         console.log(question.checkBox)
            //         if (question.checkBox) {
            //             if (question.checkBox.length == 0) {
            //                 mui.toast('请选择对应项', {
            //                     duration: 'long',
            //                     type: 'div'
            //                 })
            //                 num = 1
            //                 return
            //             } else if (question.checkBox.length > 5) {
            //                 mui.toast('每题选项不能超过五个', {
            //                     duration: 'long',
            //                     type: 'div'
            //                 })
            //                 num = 1
            //                 return
            //             }

            //         }
            //     });
            //     if (num == 1) {
            //         return false
            //     }
            //     return true

            // },
            forData() {
                this.sumbitObj = {
                    "o_ai": {
                        "goodfeatures": this.AIquesTionnair[0].checkBox,
                        "goodreviews": this.AIquesTionnair[0].content,
                        "badfeatures": this.AIquesTionnair[1].checkBox,
                        "badreviews": this.AIquesTionnair[1].content,
                        "productsuggestion": this.AIquesTionnair[2].content,
                    },
                    "o_website": {
                        "goodfeatures": this.quesTionnair[0].checkBox,
                        "goodreviews": this.quesTionnair[0].content,
                        "badfeatures": this.quesTionnair[1].checkBox,
                        "badreviews": this.quesTionnair[1].content,
                        "productsuggestion": this.quesTionnair[2].content,
                    },
                    "i_service": {
                        "goodfeatures": this.igwquesTionnair[0].checkBox,
                        "goodreviews": this.igwquesTionnair[0].content,
                        "badfeatures": this.igwquesTionnair[1].checkBox,
                        "badreviews": this.igwquesTionnair[1].content,
                        "productsuggestion": this.igwquesTionnair[2].content,
                    },
                    "i_input": {
                        "goodfeatures": this.dianquesTionnair[0].checkBox,
                        "goodreviews": this.dianquesTionnair[0].content,
                        "badfeatures": this.dianquesTionnair[1].checkBox,
                        "badreviews": this.dianquesTionnair[1].content,
                        "productsuggestion": this.dianquesTionnair[2].content,
                    },
                    "i_wps": {
                        "goodfeatures": this.wpsquesTionnair[0].checkBox,
                        "goodreviews": this.wpsquesTionnair[0].content,
                        "badfeatures": this.wpsquesTionnair[1].checkBox,
                        "badreviews": this.wpsquesTionnair[1].content,
                        "productsuggestion": this.wpsquesTionnair[2].content,
                    }
                }



            },
            checkChange(item) {
                // if(item.checkBox.length > 4){
                //     mui.toast('每题选项不能超过五个', {
                //                 duration: 'long',
                //                 type: 'div'
                //             })
                //             item.disabled = true
                //             return
                // }

            },
            sendEmail() {
                this.forData()
                userId = sessionStorage.getItem("userId");
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = "";
                }
                let timestamp = new Date().getTime() + ""
                let dataFun = {}

                let data = {
                    userId: userId,
                    questionnaireResults: JSON.stringify(this.sumbitObj),
                    timestamp: timestamp,
                }
                data = JSON.stringify(data);
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                let sign = sm3(data);
                $.ajax({
                    method: "POST", // 请求方式
                    url: localUrlLink + iscp_port + "/tjAiAssistant/question/submitResults", //请求后台地址
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign,
                        timestamp: timestamp,
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                mui.toast('提交成功', {
                                    duration: 'long',
                                    type: 'div'
                                })
                                this.home()
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: function (e) {
                        mui.toast("请稍后再试！", {
                            duration: 'long',
                            type: 'div'
                        })
                    },
                })
            },

            home() {
                $(location).attr("href", "Home.html");
            },
           
        },
    });
</script>

</html>